<#include "/common/include.html"/>
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
    <@header title="新增公告">
<#--        <@cssLibs.summernote_css/>-->
    </@header>
    <@addorEdit fromId="form-notice-edit">
        <input type="hidden" name="id" value="${notice.id}"/>
        <input type="hidden" name="htmlNo" value="${notice.htmlNo}"/>
        <div class="alert alert-dismissible callout callout-info animated bounceInDown">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <p><i class="icon fa fa-info"></i><strong>重要提示:</strong>如果选择发布公告,等级是<u>严重</u>才会在登陆页面Top提示,等级是<u>紧急</u>只在登陆之后Top提示,等级是<u>普通</u>则在Top提醒栏提示!</p>
        </div>
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>公告标题：</label>
                    <div class="col-sm-8">
                        <input id="noticeTitle" name="noticeTitle" placeholder="请输入公告标题" value="${notice.noticeTitle}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>公告类型：</label>
                    <div class="col-sm-8">
                        <select id="noticeType" name="noticeType" class="form-control">
                            <#list dict.getType('sys_notice_type')>
                                <#items as d>
                                    <#if d.status =='0' >
                                        <option value="${d.dictValue}" <#if d.dictValue ==notice.noticeType >selected="selected"</#if>><@ctx.i18n text = "${d.dictLabel}"/></option>
                                    </#if>
                                </#items>
                            </#list>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">提示标题：</label>
                    <div class="col-sm-8">
                        <input name="noticeTipTitle" id="noticeTipTitle" placeholder="提示标题"  value="${notice.noticeTipTitle}" class="form-control" type="text" maxlength="100" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>等级：</label>
                    <div class="col-sm-8">
                        <select name="noticeLevel" class="form-control">
                            <#list dict.getType('sys_notice_level')>
                                <#items as d>
                                    <#if d.status =='0' >
                                        <option value="${d.dictValue}" <#if d.dictValue == notice.noticeLevel >selected="selected"</#if>><@ctx.i18n text = "${d.dictLabel}"/></option>
                                    </#if>
                                </#items>
                            </#list>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>有效时长：</label>
                    <div class="col-sm-8">
                        <div class="time-label">
                            <input type="text" class="time-input" id="startTime" placeholder="发布时间" value="${notice.startTime?string('yyyy-MM-dd HH:mm:ss')}" name="startTime" data-type="datetime" data-format="yyyy-MM-dd HH:mm:ss"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" value="${notice.endTime?string('yyyy-MM-dd HH:mm:ss')}" name="endTime" data-type="datetime" data-format="yyyy-MM-dd HH:mm:ss" required/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">公告内容</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <div class="col-sm-12">
                        <input id="noticeContent" name="noticeContent" value="${notice.noticeContent?html}" type="hidden">
<#--                        <div id="editor" class="summernote"></div>-->
                        <script id="noticeContentUE" type="text/plain" style="width:100%;height:300px;"></script>
                    </div>
                </div>
            </div>
        </div>
    </@addorEdit>
    <div class="hr-line-dashed"></div>
    <div class="row" id="_addTab">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="opt.form.submit()"><i class="fa fa-check"></i><@ctx.i18n text = "保存"/></button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="opt.modal.closeTab()"><i class="fa fa-reply-all"></i><@ctx.i18n text = "关闭"/></button>
        </div>
    </div>
    <@footer>
        <@jsLibs.ueditor_js/>
        <script>
            var prefix = baseURL + "sys/notice";

            var remarksUE;
            $(function() {
                remarksUE = UE.getEditor('noticeContentUE', {
                    maximumWords: 10000,
                    readonly: false, initialFrameHeight: 200,
                })
                // 更新编辑器内容  remarksUE.updateContent();
                remarksUE.updateContent = function(){
                    if (!remarksUE.hasContents()){
                        $('#noticeContent').val("").change();
                    }else{
                        var html = remarksUE.getAllHtml().replace('<!--HTML-->','');
                        $('#noticeContent').val("<!--HTML-->" + html).change();
                    }
                    if (typeof window.webuploaderRefresh == 'function'){
                        window.webuploaderRefresh();
                    }
                };
                // 编辑器加载完成事件
                remarksUE.ready(function(){
                    // remarksUE.setContent($("#noticeContent").val(),false);
                    remarksUE.execCommand('insertHtml', $("#noticeContent").val())
                    remarksUE.addListener('contentchange', function(){
                        remarksUE.updateContent();
                    });
                });
                //
            });
            // $(function() {
            //     $('.summernote').summernote({
            //         placeholder: '请输入公告内容',
            //         height: 192,
            //         lang: 'zh-CN',
            //         followingToolbar: false,
            //         callbacks: {
            //             onImageUpload: function (files, editor, $editable) {
            //                 sendFile(files, editor, $editable);
            //             }
            //         }
            //     });
            //     var content = $("#noticeContent").val();
            //     $('#editor').summernote('code', content);
            // })

            // // 上传文件
            // function sendFile(files, obj) {
            //     var data = new FormData();
            //     data.append("file", files[0]);
            //     $.ajax({
            //         type: "POST",
            //         url: prefix + "/uploadFile",
            //         data: data,
            //         cache: false,
            //         contentType: false,
            //         processData: false,
            //         dataType: 'json',
            //         success: function(result) {
            //             if (result.code == opt.variable.web_status.SUCCESS) {
            //                 console.log(result.url+ result.fileName);
            //                 $('.summernote').summernote('insertImage', result.url+result.fileName);
            //             } else {
            //                 opt.modal.error(result.msg);
            //             }
            //         },
            //         error: function(error) {
            //             opt.modal.error("图片上传失败。");
            //         }
            //     });
            // }

            $("#form-notice-edit").validate({
                onkeyup: false,
                rules:{
                    startTime:{
                        required: true
                    },
                    endTime: {
                        required: true,
                        compareDate: "#startTime"
                    }
                },
                messages: {
                    "startTime":{
                        required: "开始时间不能为空"
                    },
                    "endTime":{
                        required: "结束时间不能为空",
                        compareDate: "结束日期选择错误!"
                    }
                },
                focusCleanup: true
            });

            function submitHandler() {
                if (opt.validate.form()) {
                    // var sHTML = $('.summernote').summernote('code');
                    $("#noticeContent").val(UE.getEditor('noticeContentUE').getAllHtml());
                    opt.operate.saveTab(prefix + "/edit", $('#form-notice-edit').serialize());
                }
            }
        </script>
    </@footer>
</@pageTheme>